﻿@model List<YcHighChartsMvc.Model.Chart.chartConfig>
@{
    ViewBag.Title = "Index";
}
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
<script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>
@if (Model != null)
{
    <script>
    $(function () {
        $('#canvasDiv').highcharts({
            chart: {
                type: '@Model[0].Type'
            },
            title: {
                text:  '@Model[0].Title'
            },
            subtitle: {
                text: '@Model[0].Subtitle'
            },
            xAxis: {
                categories: @Html.Raw(Model[0].XAxis.CategoriesJson)
            },
            yAxis: {
                title: {
                    text: '@Model[0].YAxis.Title'
                },
                labels: {
                    formatter: function () {
                        return this.value + '次'
                    }
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: @Html.Raw(Model[0].SeriesJson)
        });

        $('#canvasDiv1').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '@Model[1].Title'
            },
            subtitle: {
                text: '@Model[1].Subtitle'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    },
                    showInLegend: true
                },
            },
            series: @Html.Raw(Model[1].SeriesJson)
        });

        $('#canvasDiv2').highcharts({
	            
	        chart: {
	            polar: true,
	            type: '@Model[2].Type'
	        },
	    
	        title: {
	            text: '@Model[2].Title'
	        },
	    
	        pane: {
	    	    size: '80%'
	        },
	    
	        xAxis: {
	            categories: @Html.Raw(Model[2].XAxis.CategoriesJson),
	            tickmarkPlacement: 'on',
	            lineWidth: 0
	        },
	        
	        yAxis: {
	            gridLineInterpolation: 'polygon',
	            lineWidth: 0,
	            min: 0
	        },
	    
	        tooltip: {
	    	    shared: true,
	            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br>'
	        },
	    
	        series:  @Html.Raw(Model[2].SeriesJson)
	
	    });

       $('#canvasDiv3').highcharts({
            chart: {
                type: '@Model[3].Type'
            },
            title: {
                text: '@Model[3].Title'
            },
            subtitle: {
                text: '@Model[3].Subtitle'
            },
            xAxis: {
            categories:@Html.Raw(Model[3].XAxis.CategoriesJson)
           },
            yAxis: {
                min: 0,
                title: {
                    text: '@Model[3].YAxis.Title'
                }
            },
            tooltip: {
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: @Html.Raw(Model[3].SeriesJson)
        });

        $('#canvasDiv4').highcharts({
            chart: {
                type: '@Model[4].Type',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: '@Model[4].Title'
            },
            subtitle: {
                text: '@Model[4].Subtitle'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            },
            series: @Html.Raw(Model[4].SeriesJson)
        });

        $('#canvasDiv5').highcharts({                                           
            chart: {                                                           
                type: 'bar'                                                    
            },                                                                 
            title: {                                                           
                text: '@Model[0].Title'                    
            },                                                                 
            subtitle: {                                                        
                text: '@Model[0].Subtitle'                                  
            },                                                                 
            xAxis: {                                                           
                categories: @Html.Raw(Model[0].XAxis.CategoriesJson),
                title: {                                                       
                    text: null                                                 
                }                                                              
            },                                                                 
            yAxis: {   
                title: {
                    text: '@Model[0].YAxis.Title'
                },                                                                                                                 
                labels: {                                                      
                    overflow: 'justify'                                        
                }                                                              
            },                                                                                                                                
            plotOptions: {                                                     
                bar: {                                                         
                    dataLabels: {                                              
                        enabled: true                                          
                    }                                                          
                }                                                              
            },                                                                 
            legend: {                                                          
                layout: 'vertical',                                            
                align: 'right',                                                
                verticalAlign: 'top',                                          
                x: -40,                                                        
                y: 100,                                                        
                floating: true,                                                
                borderWidth: 1,                                                
                backgroundColor: '#FFFFFF',                                    
                shadow: true                                                   
            },                                                                 
            credits: {                                                         
                enabled: false                                                 
            },                                                                 
            series: @Html.Raw(Model[0].SeriesJson)                                                          
        });  
        
        
$('#canvasDiv6').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: '@Model[0].Title'
            },
            subtitle: {
                text: '@Model[0].Subtitle'
            },
            xAxis: [{
                categories: @Html.Raw(Model[0].XAxis.CategoriesJson),
                reversed: false
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: @Html.Raw(Model[0].XAxis.CategoriesJson),
                linkedTo: 0
            }],
            yAxis: {
                title: {
                    text: null
                }
            },
    
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
    
            series: @Html.Raw(Model[0].SeriesJson)  
        });                
    });
    </script>
}
<div id='canvasDiv'>
</div>
<div id='canvasDiv1'>
</div>
<div id='canvasDiv2'>
</div>
<div id='canvasDiv3'>
</div>
<a name="highcharts" href="../HighCharts/HighCharts" target="_blank">点击按钮切换图表</a>
<div id='canvasDiv4'>
</div>
<div id='canvasDiv5'>
</div>
<div id='canvasDiv6'>
</div>